<template>
  <el-date-picker
    v-bind="$attrs"
    v-on="$listeners"
    v-model="initValue"
    @change="handleDateChange"
  >
  </el-date-picker>
</template>

<script>
/** v2和v3的传递方式并不一致 
  v2需要使用
  v-bind:start="form.start"
  v-on:update:start="form.start = $event"
  v3直接使用
  v-model="form.start"
*/

export default {
  props: {
    start: {
      type: Date,
      default: null
    },
    end: {
      type: Date,
      default: null
    }
  },
  data() {
    let initValue = [];
    if(this.start, this.end){
      initValue = [this.start, this.end];
    }
    return {
      initValue
    };
  },
  watch: {
    start(newVal) {
      this.initValue[0] = newVal;
    },
    end(newVal) {
      this.initValue[1] = newVal;
    }
  },
  methods: {
    handleDateChange(value) {
      if (Array.isArray(value) && value.length === 2) {
        this.$emit('update:start', value[0]);
        this.$emit('update:end', value[1]);
      }
    }
  }
};
</script>